import React, { useState } from 'react';
import { Button, Modal, message } from 'antd';
import type { FormProps } from 'antd';
import { Form, Input } from 'antd';
import {
  TabletOutlined,
  MailOutlined,
  WechatOutlined,
  QqOutlined,
  EllipsisOutlined,
} from '@ant-design/icons';
import { get_login } from '../api/axios';
import { Space, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [islog, setlog] = useState(true);

  const logClick = () => {
    setlog(false)
  }
  const logClicks = () => {
    setlog(true)
  }

  const showModal = () => {
    setIsModalOpen(true);
  };

  const showModall = () => {
    setIsModalOpen(false)
  }

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(true);
  };


  type FieldType = {
    phone?: string;
    password?: string;
  };
  type Tab = 'tab1' | 'tab2' | 'tab3';

  const [activeTab, setActiveTab] = useState<Tab>('tab1');

  const handleTabClick = (tab: Tab) => {
    setActiveTab(tab);
  };

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    console.log('Success:', values);
    const res = await get_login({
      phone: values.phone,
      password: values.password
    })
    console.log(res, 1212121)
    if (res.data.code === 200) {
      message.open({
        type: "success",
        content: "登录成功"
      })
      localStorage.setItem("token", res.data.data.token)
      setIsModalOpen(false)
    } else {
      message.open({
        type: "info",
        content: "登录失败"
      })
    }
  };
  const deleToken = () => {
    localStorage.removeItem("token")
    message.open({
      type: "info",
      content: "退出登录"
    })
    window.location.reload()
  }

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <a onClick={deleToken}>
          退出登录
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          个人中心
        </a>
      ),
      disabled: true,
    },
  ];


  return (
    <div>
      {localStorage.getItem("token") ? (
        <div className='avatar_page'>
          <Dropdown menu={{ items }}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                {/* <Avatar size="large" icon={<UserOutlined />} /> */}
                <img src="/src/img/ccc.png" alt="" style={{ width: "50px", height: "50px", borderRadius: "50%" }} />
              </Space>
            </a>
          </Dropdown>


        </div>
      ) : (
        <Button type="primary" onClick={showModal}>
          登录/注册
        </Button>
      )}

      <Modal open={isModalOpen} footer width="700px" closable={false} onOk={handleOk} onCancel={handleCancel}>
        <div className='modal_page'>
          <div className="left_img">
            <img src="src/img/zheng.png" alt="" />
          </div>
          <div className="right_login">
            <div className="top_login">
              {
                islog ? (<div onClick={logClick} className="you_you">
                  <h2>微信扫码登录</h2>
                  <img src="/src/img/btn_phone.png" alt="" />
                </div>) : (
                  <div onClick={logClicks} className='you_you'>
                    <h2>手机号登录</h2>
                    <img src="/src/img/btn_qrcode.png" alt="" />
                  </div>
                )
              }

            </div>
            <div className="center_zhong">
              {
                islog ? (
                  <div>
                    <h1>手机密码登录</h1>

                    <Form
                      name="basic"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 16 }}
                      style={{ maxWidth: 600 }}
                      onFinish={onFinish}
                      autoComplete="off"
                    >
                      <Form.Item<FieldType>
                        label="用户名"
                        name="phone"
                        rules={[{ required: true, message: '请输入手机号' }]}
                      >
                        <Input />
                      </Form.Item>

                      <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                      >
                        <Input.Password />
                      </Form.Item>

                      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" className='btn1'>
                          登录
                        </Button>
                        <p><span style={{ color: "#1261ff" }}>手机验证码登录</span><span style={{ marginLeft: "160px" }}>忘记密码</span></p>
                      </Form.Item>
                    </Form>
                  </div>
                ) : (
                  <div className='quer_page'>
                    <div className="table_page">
                      <div className="wx_page">
                        <p className={activeTab === 'tab1' ? 'active' : ''}
                          onClick={() => handleTabClick('tab1')}>微信扫码登录</p>
                      </div>
                      <div className="app_page">
                        <p className={activeTab === 'tab2' ? 'active' : ''}
                          onClick={() => handleTabClick('tab2')}>易企秀APP扫码登录</p>
                      </div>
                    </div>
                    {activeTab === 'tab1' && <div className='qr_page'>
                      <img src="/src/img/erweima1.png" alt="" />
                    </div>}
                    {activeTab === 'tab2' && <div className='qr_page'>
                      <img src="/src/img/erweima2.png" alt="" />
                    </div>}

                  </div>
                )
              }

              <div className="btm_page">
                <div className="topp_page">
                  <p style={{ textAlign: "center" }}>其他登录方式</p>
                </div>
                <div className="icon_page">
                  <div className="iconbtn_page">
                    <h3><TabletOutlined style={{ fontSize: "30px", marginTop: "10px", marginLeft: "10px" }} /></h3>
                    <p>手机号</p>
                  </div>
                  <div className="iconbtn_page">
                    <h3><MailOutlined style={{ fontSize: "30px", marginTop: "10px", marginLeft: "10px" }} /></h3>
                    <p>邮箱</p>
                  </div>
                  <div className="iconbtn_page">
                    <h3><WechatOutlined style={{ fontSize: "30px", marginTop: "10px", marginLeft: "10px" }} /></h3>
                    <p>企业微信</p>
                  </div>
                  <div className="iconbtn_page">
                    <h3><QqOutlined style={{ fontSize: "30px", marginTop: "10px", marginLeft: "10px" }} /></h3>
                    <p>QQ</p>
                  </div>
                  <div className="iconbtn_page">
                    <h3><EllipsisOutlined style={{ fontSize: "30px", marginTop: "10px", marginLeft: "10px" }} /></h3>
                    <p>更多</p>
                  </div>

                </div>
              </div>
              <div className='text_page'>
                <div className="text_zuo">
                  <p style={{ marginLeft: "10px", marginTop: "30px" }}>您登录即同意易企秀《用户服务协议》《隐私政策》《授权许可证》,
                    如您成为易企秀会员,即视为同意《会员服务协议》
                  </p>
                </div>
                <p style={{ marginLeft: "30px", marginTop: "40px" }}>手机号注册</p>
              </div>
            </div>

          </div>
          <div className='guan_page'>
            <p onClick={showModall}>X</p>
          </div>
        </div>
      </Modal>

    </div>

  );
};

export default App;